* @author  sparkHou
* @date 2020-11-25 10:38
* @Description:
*/
<template>
  <div class="device-manage-detail">
    <el-dialog width="60%" class="device-manage-detail" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag append-to-body :modal-append-to-body="false" :close-on-click-modal="false">
      <span slot="title">
        <i class="iconfont icon-zhiliangguanli1"></i>
        <span>{{title}}</span>
      </span>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      </el-tabs>
      <div class="g-dialog-scroll">
        <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules" style="position: relative" v-show="activeName == 'first'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="项目名称" prop="projectName" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" v-model="formBaseData.projectName" placeholder="请输入项目名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="材料名称" prop="materialName" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" v-model="formBaseData.materialName" placeholder="请输入材料名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="规格/型号" prop="model" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" v-model="formBaseData.model" placeholder="请输入规格/型号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="单位" prop="unit" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" v-model="formBaseData.unit" placeholder="请输入单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="数量" prop="number" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" v-model="formBaseData.number" placeholder="请输入数量" type="number" @blur="blurInputEvent" @keydown.native="$publicJs.changeInputLimit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="单价" prop="price" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" v-model="formBaseData.price" placeholder="请输入单价" type="number" @blur="blurInputEvent" @keydown.native="$publicJs.changeInputLimit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="合价" prop="totalPrice" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" type="number" v-model="formBaseData.totalPrice" placeholder="请输入合价" @blur="blurInputEvent" @keydown.native="$publicJs.changeInputLimit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark" :label-width="formlabelWidth">
                <el-input :disabled="detailType !== 'build' && detailType !== 'edit'" class="contract-ele" type="textarea" v-model="formBaseData.remark" placeholder="请输入备注" :rows="5"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <!--api操作按钮 除去上报-->
        <!--新建和编辑的暂存上报-->
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit', { flag: 1 })">
            <span><i class="iconfont icon-icon_save"></i> 确 定</span>
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')">
          <i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import priceManage from '@/api/buss/priceManage';
import msgUtil from '@/utils/msgUtil'
import LoadingButton from '@/components/LoadingButton';
import { v4 as uuidv4 } from 'uuid'
export default {
  name: "price-manage-detail",
  components: {
    LoadingButton
  },
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  watch: {
    postDetail(value) {
      console.log("value=", value)
      // this.resetData()
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.title = value.typeName
      // 详情id
      this.detailId = value.detailId ? value.detailId : 0
      // 非新建详情时 获取详情
      if (this.detailType !== 'build') {
        // 获取详情请求
        this.getDetail()
      }
    },
  },
  data() {
    return {
      formBaseData: {
        projectName: '',
        materialName: '',
        model: '',
        unit: '',
        number: '',
        price: '',
        totalPrice: '',
        remark: '',
      }, // 表单基本信息内容
      formBaseRules: {
        projectName: [{ required: true, message: '请选择项目名称', trigger: 'blur' }],
        materialName: [{ required: true, message: '请选择材料名称', trigger: 'blur' }],
        // model: [{ required: true, message: '请选择规格/型号', trigger: 'blur' }],
        // unit: [{ required: true, message: '请选择单位', trigger: 'blur' }],
        // number: [{ required: true, message: '请选择数量', trigger: 'blur' }],
        // price: [{ required: true, message: '请选择单价', trigger: 'blur' }],
        // totalPrice: [{ required: true, message: '请选择合价', trigger: 'blur' }],
        // remark: [{ required: true, message: '请选择备注', trigger: 'blur' }]
      }, // 表单基本信息验证
      formShow: false, // 表单展示
      activeName: 'first',
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      title: '',
      detailId: '', // 当前详情的id
      isLoading: false,
      formlabelWidth: '110px' // 表单左侧标题宽度
    }
  },
  created() { },
  methods: {
    // 获取详情请求 api
    getDetail() {
      priceManage.getOne(this.detailId).then(res => {
        if (res.code === 200) {
          this.$set(this, 'formBaseData', res.data)
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(res => {
        console.log('res', res)
        this.$messageError(this.$route.name + '获取详情请求-请求失败')
      })
    },
    blurInputEvent() {
      if (this.formBaseData.number) {
        this.formBaseData.number = parseInt(this.formBaseData.number)
      }

      if (this.formBaseData.price) {
        this.formBaseData.price = Number(this.formBaseData.price).toFixed(2)
      }
      if (this.formBaseData.totalPrice) {
        this.formBaseData.totalPrice = Number(this.formBaseData.totalPrice).toFixed(2)
      }
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res, callback) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          this.formBaseData = {
            projectName: '',
            materialName: '',
            model: '',
            unit: '',
            number: '',
            price: '',
            totalPrice: '',
            remark: '',
          }
          // 关闭弹窗
          this.formShow = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate(valid => {
            if (valid) {
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                this.formShow = false
                this.isLoading = false
                this.$messageSuccess('保存成功')
                // 传值给父组件刷新列表
                this.$emit('reloadList')
              })
            } else {
              callback && callback();
              this.isLoading = false
            }
          })
          break
      }
    },
    //小数点和数字
    newUpNumber(e) {
      e.target.value = e.target.value.replace(/[^0-9.]/g, '')
    },
    // 提交详情 提交1/暂存0 新建0/修改1
    submitDetail(type, callback) {
      if (this.detailType === 'build') {
        priceManage.submit(this.formBaseData)
          .then(res => {
            this.detailId = res.data.id
            // 传值给父组件刷新列表
            // this.$notify({
            //   title: '保存成功',
            //   type: 'success',
            //   duration: 1500
            // })
            if (callback) { callback() }
          }).catch(res => {
            this.isLoading = false
            this.$notify({
              title: '数据新增失败',
              type: 'error',
              duration: 2500
            })
          })
      } else {
        priceManage.resubmit(this.formBaseData)
          .then(res => {
            if (res.code === 200) {
              this.detailId = res.data.id
              // 传值给父组件刷新列表
              // this.$notify({
              //   title: '保存成功',
              //   type: 'success',
              //   duration: 1500
              // })
              if (callback) { callback() }
            } else {
              this.isLoading = false
              this.$messageError(res.data.message)
            }
          }).catch(res => {
            this.isLoading = false
          })
      }
    }
  }
}
</script>
<style scoped lang="scss">
$borderColor: #c0c4cc;
.device-manage-detail {
  .el-select.half {
    width: 250px;
  }

  .el-select.fill {
    width: 800px;
  }

  .contract-ele {
    //   width: 280px;
    width: 100%;
  }

  .el-input .el-select {
    width: 130px;
  }

  .fee_add {
    color: #008fe0;
    border-color: #008fe0;
    float: right;
    margin-bottom: 10px;
  }

  .dialog-section-title {
    font-size: 16px;
    font-weight: bold;
  }

  .dialog-upload-type {
    font-size: 14px;
    color: #008fe0;
    margin-left: 50px;
  }

  .contractNum {
    position: absolute;
    top: 0;
    right: 20px;

    p {
      color: #a71c1c;
    }
  }

  .icon-add {
    position: absolute;
    top: 0;
    right: 0;
    color: #008fe0;
    font-size: 30px;
    cursor: pointer;
  }

  .icon-subtract {
    position: absolute;
    top: 0;
    right: 0;
    color: #008fe0;
    font-size: 30px;
    cursor: pointer;
  }

  .form-tip {
    font-size: 12px;
    color: #a71c1c;
  }

  .scoreTXT {
    color: #008fe0;
    cursor: pointer;
  }

  .formTitle {
    font-weight: bold;
    font-size: 16px;
    margin: 15px 0;
  }

  .hoverTxt {
    color: #008fe0;
    cursor: pointer;
  }

  .upload-demo-fujian {
    width: 250px;
  }

  .upload-demo-zongtu {
    width: 300px;
  }

  .newArea {
    display: flex;
  }

  .pdf {
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
    flex-wrap: wrap;

    img {
      display: block;
      height: 20px;
      margin-right: 15px;
    }
  }

  .pdfItem {
    display: flex;
    position: relative;
    justify-content: space-between;
    padding-bottom: 5px;
    align-items: center;

    width: 100%;
    height: 40px;

    .pdfBox {
      padding-top: 5px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;

      .content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        flex: 1;
      }
    }

    .buttonG {
      display: flex;
    }
  }

  .btnGroup {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    padding-top: 5px;

    button {
      margin-left: 10px !important;
      margin-bottom: 5px !important;
    }
  }

  .flexTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .g-flex-center {
    display: flex;
    align-items: center;
  }
}
.flex-row-bridge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  p {
    margin: 5px 0;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  i {
    cursor: pointer;
  }
  i:hover {
    color: #a71c1c;
  }
}
.info-detail-box {
  border: 1px $borderColor solid;
  display: flex;
  flex-direction: row;
  margin: 30px 0;
  .left-box {
    min-width: 200px;
    padding: 0 0 15px 0;
    padding-bottom: 50px;
    border-right: 1px $borderColor solid;
    position: relative;
    .left-content-box {
      padding: 15px;
      max-height: 350px;
      overflow-y: auto;
    }
    p {
      cursor: pointer;
    }
  }
  .right-box {
    flex-grow: 1;
    padding: 15px;
    padding-bottom: 30px;
  }
  .chooseText {
    color: #008fe0;
  }
}
.left-bottom-group {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 10px;
  left: 0;
  .el-button {
  }
  .deleteBatch {
    background-color: rgba(215, 215, 215, 0);
    border-color: #409eff;
    color: #409eff;
  }
}
.flex-hv-center {
  min-height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fileText {
  cursor: pointer;
  margin: 0;
  padding-left: 10px;
  display: flex;
  align-items: center;
  img {
    height: 20px;
    margin-right: 15px;
  }
  span {
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    margin-right: 15px;
  }
}
.fileText:hover {
  background-color: rgb(245, 247, 250);
}
</style>


